<!DOCTYPE html>
<html>  
  <head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  
    <title>first-vue</title>  
    <style type="text/css">  
        * { margin: 0; padding: 0; }  
        html,body { background: #eee; }  
        ul,li { list-style: none; }  
        a { text-decoration: none; }  
        img { vertical-align: middle; }  
        /* 跳转页面动画 */  
        .slide-enter,  
        .slide_back-enter {  
            position: absolute;  
            width: 100%;  
        }  
        .slide-leave,  
        .slide_back-leave {  
            position: absolute;  
            width: 100%;  
        }  
        .slide-enter-active,  
        .slide_back-enter-active {  
            transition: all 0.3s linear;  
        }  
        .slide-leave-active {  
            position: absolute;  
            transition: all 0.3s linear;  
            transform: translate(-100%);  
        }  
        .slide-enter{  
            transform: translateX(100%);  
        }  
        .slide_back-leave-active {  
            position: absolute;  
            transition: all 0.3s linear;  
            transform: translate(100%);  
        }  
        .slide_back-enter {  
            transform: translateX(-100%);  
        }  
    </style>  
  </head>  
  <body>  
    <div id="app">  
        <transition :name="transitionName">  
            <router-view></router-view>  
        </transition>  
    </div>  
  
    <script type="text/javascript">  
  
        // 计算html的font-size  
        (function(){  
            function resizeBaseFontSize(){  
                var rootHtml = document.documentElement,  
                    deviceWidth = rootHtml.clientWidth;  
  
                if(deviceWidth > 640){  
                    deviceWidth = 640;  
                }  
  
                rootHtml.style.fontSize = deviceWidth / 7.5 + "px";  
            }  
  
            resizeBaseFontSize();  
  
            window.addEventListener("resize", resizeBaseFontSize, false);  
            window.addEventListener("orientationchange", resizeBaseFontSize, false);  
        })();  
    </script>  
  </body>  
</html>  